<template>
  <h1>欢迎来到餐厅管理系统！</h1>
<!--  <div class="dashboard-first-wrapper">-->
<!--    <div class="dashboard-first">-->
<!--      <h5 class="dashboard-title">近七日销售额</h5>-->
<!--      <div class="dashboard-content">-->
<!--        2, 500<span style="color: #f56e6e;margin-left: 10px">¥</span>-->
<!--      </div>-->
<!--    </div>-->
<!--    <div class="dashboard-first">-->
<!--      <h5 class="dashboard-title">员工数</h5>-->
<!--      <div class="dashboard-content">-->
<!--        2, 500-->
<!--      </div>-->
<!--    </div>-->
<!--    <div class="dashboard-first">-->
<!--      <h5 class="dashboard-title">会员数</h5>-->
<!--      <div class="dashboard-content">-->
<!--        2, 500-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
<!--  <div class="dashboard-second-wrapper">-->
<!--    <div ref="employeeChart" class="dashboard-second"></div>-->
<!--    <div ref="orderChart" class="dashboard-second"></div>-->
<!--  </div>-->
</template>

<script setup>
// import * as echarts from 'echarts'
// import {onMounted, ref} from "vue";
//
// const employeeChart = ref()
// const orderChart = ref()
//
// const chartInit = () => {
//   let chart1 = echarts.init(employeeChart.value)
//   let chart2 = echarts.init(orderChart.value)
//   let option1 = {
//     tooltip: {
//       trigger: 'item'
//     },
//     legend: {
//       top: '5%',
//       left: 'right'
//     },
//     series: [
//       {
//         name: 'Access From',
//         type: 'pie',
//         radius: ['40%', '70%'],
//         avoidLabelOverlap: false,
//         label: {
//           show: false,
//           position: 'center'
//         },
//         emphasis: {
//           label: {
//             show: true,
//             fontSize: 40,
//             fontWeight: 'bold'
//           }
//         },
//         labelLine: {
//           show: false
//         },
//         data: [
//           { value: 1048, name: 'Search Engine' },
//           { value: 735, name: 'Direct' },
//           { value: 580, name: 'Email' },
//           { value: 484, name: 'Union Ads' },
//           { value: 300, name: 'Video Ads' }
//         ]
//       }
//     ]
//   };
//   let option2 = {
//     xAxis: {
//       type: 'category',
//       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
//     },
//     yAxis: {
//       type: 'value'
//     },
//     series: [
//       {
//         data: [150, 230, 224, 218, 135, 147, 260],
//         type: 'line'
//       }
//     ]
//   };
//   chart1.setOption(option1)
//   chart2.setOption(option2)
// }

// onMounted(() => {
  // chartInit()
// })
</script>

<style scoped lang="less">
//.dashboard-first-wrapper {
//  display: flex;
//  flex-wrap: wrap;
//  justify-content: space-between;
//
//  .dashboard-first {
//    width: 31%;
//    height: 200px;
//    margin-bottom: 20px;
//    border-radius: 5px;
//    background-color: #f3f3f3;
//  }
//  .dashboard-title {
//    margin-top: 5px;
//    margin-left: 8px;
//  }
//  .dashboard-content {
//    display: flex;
//    justify-content: center;
//    height: 100px;
//    align-items: center;
//    font-size: 60px;
//  }
//}
//
//.dashboard-second-wrapper {
//  display: flex;
//  justify-content: space-between;
//
//  .dashboard-second {
//    width: 48%;
//    height: 280px;
//    margin-bottom: 20px;
//    border-radius: 5px;
//    background-color: #f3f3f3;
//  }
//}
</style>